<template>
  <view class="o-page-content cofs-page">
    <!-- <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar> -->
    <loading :showLoaded.sync="showLoaded"></loading>
    <onlineService></onlineService>
    <view v-if="orderStatus === 'WAIT_SELLER_SEND_GOODS' || 'WAIT_BUYER_CONFIRM_GOODS'" class="rma_listMob">
      <repeat>
        <view class="rma_detail_info">
          <view class="item">
            <text class="title">服务单号：</text>
            <text class="content" @longpress="copyrefundCode">{{ list.refundCode }}</text>
            <text @click="copyrefundCode" class="copy-btnCode">复制</text>
          </view>
          <view class="item">
            <text class="title">订单编号：</text>
            <text class="content" @longpress="copyorderCode">{{ list.orderCode }}</text>
            <text @click="copyorderCode" class="copy-btnCode">复制</text>
          </view>
          <view class="item">
            <text class="title">申请时间：</text>
            <text class="content">{{ list.createTime }}</text>
          </view>
          <view class="item">
            <text class="title">处理状态：</text>
            <text class="content">{{ refundStatus[list.status] }}</text>
          </view>
          <view class="item" v-if="list.refuseMessage">
            <text class="title">关闭原因：</text>
            <text class="content">{{ list.refuseMessage }}</text>
          </view>
          <view class="item" v-if="list.reason !== '无原因'">
            <text class="title">退货退款原因：</text>
            <text class="content">{{ list.reason }}</text>
          </view>
          <view class="item" v-if="list.description">
            <text class="title">备注：</text>
            <text class="content">{{ list.description }}</text>
          </view>
          <view class="item" v-if="orderSource == 'mall'">
            <text class="title"></text>
            <text class="content">如需操作订单请登录至官网(www.cosstores.cn)</text>
          </view>
        </view>
        <block v-for="(item, index) in listItems" :key="index" v-if="item.isGift != 1">
          <view class="rma_detail_info">
            <view class="subTitle">退货商品信息</view>
            <view class="good_list">
              <navigator class="image_box"
                :url="'/pages/item/item?id=' + item.itemId + '&valueId=' + item.skuProperties[0].valueId + '&valueName=' + item.skuProperties[0].valueName"
                hover-class="none">
                <image :src="item.skuImageUrl" :style="{ height: imageHeight + 'rpx' }"></image>
              </navigator>
              <view class="textInfo">
                <navigator
                  :url="'/pages/item/item?id=' + item.itemId + '&valueId=' + item.skuProperties[0].valueId + '&valueName=' + item.skuProperties[0].valueName"
                  hover-class="none" class="name">
                  <strong>{{ item.itemName }}</strong>
                </navigator>
                <p>货号：{{ item.skuCode }}</p>
                <p>
                  {{ item.skuProperties[0].pripertyName ? item.skuProperties[0].pripertyName : item.skuProperties[0].propertyName }}：{{ item['skuProperties'][0].valueName }}
                </p>
                <p :style="{ opacity: item.skuProperties[1] ? '1' : '0' }">
                  {{ item.skuProperties[1].pripertyName ? item.skuProperties[1].pripertyName : item.skuProperties[1].propertyName }}：{{ item['skuProperties'][1].valueName }}
                </p>
                <p>数量：{{ item.num }}</p>
              </view>
            </view>
          </view>
        </block>

        <view v-if="giftName != ''" class="rma_detail_info">赠品： {{giftName}}</view>

        <view class="rma_detail_info" v-if="orderStatus == 'WAIT_SELLER_CONFIRM_GOODS'">
          <view class="subTitle">退货快递信息</view>
          <view class="address" @longpress="copy(list.trackingNumber)">
            <p>快递公司：{{ list.expressName }}</p>
            <p>快递单号：{{ list.trackingNumber }}</p>
          </view>
        </view>
        <view class="rma_detail_info"
          v-if="list.orderStatus !== 'WAIT_SELLER_SEND_GOODS' && list.status !== 'WAIT_SELLER_AGREE' && list.status !== 'CLOSED'">
          <view class="subTitle">退货地址</view>
          <view class="address">
            <p @longpress="copy(list.address)">
              {{ list.address }}
              <text @click="copy(list.address)" class="copy-btn">复制</text>
            </p>
            <p>{{ '收货人：' + list.receiverName }}</p>
            <p>{{ '电话：' + list.receiverMobile }}</p>
          </view>
        </view>
      </repeat>
    </view>

    <view class="order_list_footer"
      v-if="list.status !== 'CLOSED' && list.status !== 'RETAIL_STORE_RECEIVED' && list.orderStatus !== 'WAIT_SELLER_SEND_GOODS'">
      <view class="btn_group">
        <view class="btn btn_write" v-if="list.status == 'WAIT_BUYER_RETURN_GOODS'" @click="gorefundInfo"
          :data-id="list.orderId" :data-refundId="list.refundId">
          填写物流信息
        </view>
        <view class="btn btn_calloff"
          v-if="list.status == 'WAIT_BUYER_RETURN_GOODS' || list.status == 'WAIT_SELLER_AGREE'" @click="cancelRefund"
          :data-id="list.orderId" :data-refundId="list.refundId">
          取消申请
        </view>
      </view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>
<script>
  import api from '@/api/api';
  import {
    SYSTEM_INFO,
    CUSTOMER_INFO
  } from '@/utils/constant';
  // import NavBar from '../../components/common/navbar';
  import onlineService from '@/components/common/onlineService';
  import Loading from '@/components/common/loading';
  export default {
    config: {
      navigationBarTitleText: '退货退款'
    },
 
    data() {
      return {

        obj: '',
        orderItem: '',
        refundType: '',
        success: false,
        orderNo: '',
        orderId: '',
        refundId: '',
        orderSource: '',
        list: [],
        listItems: [],
        reason: '',
        orderStatus: '',
        refundStatus: {
          NO_REFUND: '可退款',
          WAIT_SELLER_AGREE: '待审核',
          WAIT_BUYER_RETURN_GOODS: '待退货',
          WAIT_SELLER_CONFIRM_GOODS: '待退款',
          SUCCESS: '退款成功',
          CLOSED: '已关闭',
          RETAIL_STORE_RECEIVED: '门店已收货',
          DC_RECEIVED: '仓库已收货'
        },
        windowHeight: 0,
        x: 0,
        y: 0,
        showLoaded: false,
        refundAddress: '江苏省昆山市新生路718号 江苏省富莱德仓储有限公司物流园一期B幢仓库B-1单元',
        consignee: '收货人：' + this.$store.state.storeName + '退货组',
        Email: '电子邮箱：customerservice.cn@cosstores.com',
        telephone: '电话：400-0151-365',
        imageHeight: 210,

        previousPages: '',
        isUnLoad: 0, //判断是否从申请成功页到退货详情页然后直接点填写物流信息 0 不是，1 是

        giftName: '',
        nowPages:''
      };
    },
    components: {
      onlineService: onlineService,
      loading: Loading
    },
    onLoad(options) {
      this.imageHeight = 140 / uni.getStorageSync('imageScaling');
      this.orderNo = options.orderNo;
      this.refundId = options.refundId;
      this.orderSource = options.orderSource;
      let systemInfo = uni.getStorageSync(SYSTEM_INFO);
      this.windowHeight = systemInfo.windowHeight;
      this.x = uni.getSystemInfoSync().windowWidth - 80 + 'px';
      this.y = uni.getSystemInfoSync().windowHeight - 150 + 'px';
      this.windowHeight = uni.getSystemInfoSync().windowHeight + 'px';

      let pages = getCurrentPages();
      let prevpage = pages[pages.length - 2];
      var currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
      if (prevpage == undefined) {
        this.previousPages = '';
      } else {
        this.previousPages = prevpage.route ? prevpage.route : '';
      }

    },

    onShow() {
      this.getRefundInfo();
      getApp().cl_tracker.track('mini_program_view', {
            path:  this.nowPages,
            pageName: '退货详情',
          })
    },

    //  返回按钮跳转页面
    onUnload(option) {
      if (this.previousPages == 'pages/return/applySuccess' && this.isUnLoad == 0) {
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/order/details?orderNo=' + this.orderNo
          })
        }, 100)
      }

    },

    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      // getRefundInfo 退款单详情
      getRefundInfo: async function() {
        let that = this;
        that.showLoaded = true;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO)
        const json = await api.getRefundInfo({
            header: {
              jwt: customerInfo.jwt
            }
          },
          this.refundId
        );
        if (json.code === 1000) {
          this.refundAddress = json.data.address;
          this.consignee = json.data.receiverName;
          this.telephone = json.data.receiverMobile;
          this.orderId = json.data.orderId;
          this.orderStatus = json.data.status;
          that.list = json.data;
          that.listItems = json.data.items;
          // 解析每个数组下面的items.skuProperties属性
          that.listItems.forEach(function(item, index, array) {
            that.listItems[index].skuProperties = JSON.parse(array[index].skuProperties);
            // 赠品名称
            if (that.listItems[index].isGift == 1) {
              that.giftName = that.listItems[index].itemName;
            }
          });



          that.showLoaded = false;
        } else {
          that.showLoaded = false;
          that.handleShowTextToast(json.msg);
        }
      },
      // 取消退货
      getcancelRefund: async function() {
        let that = this;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO)
        const json = await api.cancelRefund({
            method: 'PUT',
            header: {
              jwt: customerInfo.jwt
            }
          },
          this.refundId
        );
        if (json.code === 1000) {
          uni.redirectTo({
            url: '/pages/return/applySuccess?orderNo=' + this.orderNo + "&refundId=" + this.refundId
          });
        } else {
          that.handleShowTextToast(json.msg);
        }
      },

      copy(content) {
        var that = this;
        let copy = this.refundAddress + ' ' + this.consignee + ' ' + this.telephone
        uni.setClipboardData({
          data: copy,
          success: function(res) {
            uni.showToast({
              title: '复制成功'
            });
          }
        });
      },

      copyrefundCode(content) {
        uni.setClipboardData({
          data: this.list.refundCode,
          success: function(res) {
            uni.showToast({
              title: '复制成功'
            });
          }
        });
      },

      copyorderCode(content) {
        uni.setClipboardData({
          data: this.list.orderCode,
          success: function(res) {
            uni.showToast({
              title: '复制成功'
            });
          }
        });
      },

      //取消退货
      cancelRefund: async function(e) {
        let that = this;
        uni.showModal({
          title: '提示',
          content: '确定要取消吗?',
          success: function(res) {
            if (res.confirm) {
              that.getcancelRefund();
            } else if (res.cancel) {
              // '用户点击取消'
            }
          }
        });
      },

      // 跳到填写物流信息页
      gorefundInfo() {
        this.isUnLoad = 1;
        uni.navigateTo({
          url: '/pages/order/reLogistics?refundId=' + this.refundId + '&orderNo=' + this.orderNo
        });
      }
    }
  };
</script>
<style lang="less">
  @import '../../static/styles/style';

  button {
    padding: 8rpx 0;
  }

  .kf_button {
    margin-top: 0 !important;
  }

  page {
    background-color: #f9f9f9;
  }

  picker {
    position: relative;
  }

  .u-float-left {
    float: left;
  }

  .gInfo {
    overflow: hidden;
    padding: 22rpx 30rpx 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .gInfo p {
    margin-bottom: 8px;
    display: block;
  }

  .gInfo strong {
    margin: 5px 0 20px;
    font-weight: 400;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .ram_listImg {
    display: block;
    margin-right: 20px;
    width: 30%;
    float: left;
  }

  .right_btn {
    margin-top: 5px;
    display: block;
    float: right;
    border-bottom: 1px solid #444;
  }

  .bottom-section {
    margin: 30px 0 20px;
  }

  .rma_listMob h4 {
    font-size: 18px;
    text-align: center;
    margin: 20px 0;
    display: block;
  }

  .pop_Input {
    width: 100%;
    float: left;
    margin-top: 10rpx;
  }

  .a-input {
    text-align: center;
  }

  .listMob {
    margin-bottom: 20rpx;
  }

  .picker {
    height: 26px;
    line-height: 26px;
    border: 1px solid #ccc;
    padding-left: 10rpx;
  }

  .a-icon-arrow-down-small {
    top: 10rpx;
  }

  .pop_all {
    background-color: #fff;
    padding: 30rpx 35rpx;
    float: none;
    width: auto;
  }

  .rma_head {
    margin-bottom: 20rpx;
  }

  .rma_state {
    background-color: #efefef;
    padding: 0 10rpx;
    height: 48rpx;
    line-height: 48rpx;
  }

  .rma_id {
    display: flex;
    justify-content: space-between;
    padding: 0 10rpx;
    height: 48rpx;
    line-height: 48rpx;
    color: #999;
  }

  .rma_detail_info {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx 35rpx;
  }

  .rma_detail_info .good_list {
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 20rpx 0;
    border-bottom: 1px solid #efefef;
  }

  .rma_detail_info .good_list:last-child {
    border: none;
    padding-bottom: 0;
  }

  .rma_detail_info .item {
    line-height: 48rpx;
  }

  .rma_detail_info .subTitle {
    font-weight: bold;
  }

  .rma_detail_info .address p {
    margin-top: 20rpx;
    display: block;
    line-height: 40rpx;
  }

  .image_box {
    margin-right: 40rpx;
    float: left;
    min-height: 210rpx;

    image {
      width: 140rpx;
      // height: 210rpx;
      display: block;
    }
  }

  .rma_detail_info .textInfo strong {
    font-size: 28rpx;
    margin: 0 0 5px;
    display: block;
    // height: 40rpx;
    line-height: 40rpx;
    font-weight: 700;
  }

  .textInfo p {
    height: 40rpx;
    line-height: 40rpx;
    display: block;
    font-size: 26rpx;
  }

  .textInfo .name {
    // max-width: 440rpx;
    line-height: 40rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .a-link {
    margin-top: 8rpx;
    font-weight: 700;
  }

  .order_list_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 10px;

    .num {
      color: #ff4856;
    }
  }

  .btn_group {
    display: flex;
    flex-direction: row-reverse;

    .btn {
      padding: 6rpx;
      width: 25%;
      border: 1px solid #444;
      margin-left: 20rpx;
    }

    .btn_dbtn_write {
      color: #ccc;
      border: 1px solid #ccc;
      background-color: #444;
    }

    .btn_calloff {
      color: #444;
      border: 1px solid #cccccc;
      background-color: #fff;
    }
  }

  .order_list_footer {
    display: block;
  }

  .copy-btn {
    margin-left: 70rpx;
    color: #ff571a;
  }

  .copy-btnCode {
    float: right;
    margin-right: 70rpx;
    color: #ff571a;
  }
</style>
